<#--
/**
 * Copyright 2012 Claude Houle claude.houle@gmail.com
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
<#macro table columns rows id="" class="" multiRowSelection=true sortable=true dragndrop=true>
<#escape x as x?html>
<table id="${id}" class="uic-tbl  ${class}">
	<tr class="uic-tbl-header ui-widget-header">
		<#list columns as column>
			<td data-colNo="${column_index}" data-colId="${column.id}" class="uic-cell <#if column.resizable>uic-cell-resizable</#if> <#if column.sortDirection??>uic-cell-sorted</#if>" style="width:${column.sizeInPx}px; max-width:${column.maxSizeInPx}px;<#if !column.visible>display:none</#if>">
				<#if column.sortDirection??>
					<#if sortable && column.sortable>
						<div data-colId="${column.id}" class="uic-header-handle-sort <#if column.sortDirection =='asc'>ui-icon ui-icon-triangle-2-s<#else>ui-icon ui-icon-triangle-2-n</#if>uic-header-handle-sort-${column.sortDirection}" data-sortDirection="${column.sortDirection}">&nbsp;</div>
					<#else>
						<div class="uic-header-handle">&nbsp;</div>
					</#if>
				<#else>
					<#if sortable && column.sortable>
						<div data-colId="${column.id}" class="uic-header-handle-sort ui-icon ui-icon-triangle-2-n-s">&nbsp;</div>
					<#else>
						<div class="uic-header-handle">&nbsp;</div>
					</#if>
				</#if>
				<div    data-colId="${column.id}"
						style="width:${column.sizeInPx}px;"
						class="uic-cell-data"><#if column.showHeader>${column.label}<#else>&nbsp;</#if></div>
			</td>
		</#list>
		<td class="uic-col-select"><div class="ui-icon ui-icon-calculator"></div>
			<div class="uic-table-choices uic-box-shadow">
				<#list columns as column>
					<div 	class="uic-table-choice <#if column.visible>uic-table-choice-selected</#if>"
							data-value="${column.id}">${column.label}</div>
				</#list>
			</div>
		</td>
	</tr>
	<#list rows as row>
		<tr rowNo="${row_index}" data-rowId="${row.id}" class="uic-row <#if row.selected>uic-row-selected</#if> <#if row_index % 2 == 0>uic-row-even<#else>uic-row-odd</#if> <#if row.style??>${row.style}</#if>">
			<#list row.cells as cell>
				<td data-colNo="${cell_index}" class="uic-cell" style="<#if !cell.visible>display:none;</#if>"><div data-colId="${cell.columnId}" class="uic-cell-data" style="width:${cell.sizeInPx}px;">
					<#if cell.href??>
						<#if !cell.dataIsImage>
							<a href="${cell.href}">${cell.data}</a>
						<#else>
							<a href="${cell.href}"> <img src="${cell.data}" /></a>
						</#if>
					<#else>
						<#if !cell.dataIsImage>
							${cell.data}
						<#else>
							<img src="${cell.data}" />
						</#if>
					</#if>
				</div></td>
			</#list>
			<td class="uic-cell-select"></td>
		</tr>
	</#list>

	<script type="text/javascript">

		<#-- COLUMN SELECTION -->
		$('#${id} .uic-col-select .ui-icon').bind('click', function( event ){
			event.stopImmediatePropagation();
			if( ($(window).width() - $(this).position().left) < $("#${id} .uic-col-select .uic-table-choices").outerWidth() ){
				$("#${id} .uic-col-select .uic-table-choices").css('left', $(this).position().left - $("#${id} .uic-col-select .uic-table-choices").outerWidth() - 10 );
			}else{
				$("#${id} .uic-col-select .uic-table-choices").css('left', $(this).position().left );
				$("#${id} .uic-col-select .uic-table-choices").css('max-width', ($(window).width() - $(this).position().left) );
			}
			$("#${id} .uic-col-select .uic-table-choices").css('top',  $(this).position().top );
			$("#${id} .uic-col-select .uic-table-choices").css('min-width', $(this).outerWidth()  );
			$("#${id} .uic-col-select .uic-table-choices").show(0);
			$("#${id} .uic-col-select .uic-table-choices").one('mouseleave', function( event ){ $(this).hide(750); });
		});

		$("#${id} .uic-col-select .uic-table-choices .uic-table-choice").bind('click', function( event ){
			event.stopImmediatePropagation();
			var theHandle = $(this);
			if( $(this).hasClass('uic-table-choice-selected') ){
				$(this).removeClass('uic-table-choice-selected');
				$('#${id} .uic-cell-data[data-colId='+ $(theHandle).attr('data-value') +']').parent().hide();

				var event = jQuery.Event("table-column-unselect");
				event.value = $(this).attr('data-value');
				$("#${id}").trigger(event);
			} else {
				$(this).addClass('uic-table-choice-selected');
				$('#${id} .uic-cell-data[data-colId='+ $(theHandle).attr('data-value') +']').parent().show();

				var event = jQuery.Event("table-column-select");
				event.value = $(this).attr('data-value');
				$("#${id}").trigger(event);
			}
		});

		<#-- ROW SELECTION -->
		<#if !multiRowSelection>
			$('#${id} .uic-row').bind('click', function(event){
				$('#${id} .uic-row-selected').removeClass('uic-row-selected');
				$(this).toggleClass('uic-row-selected');

				var event = jQuery.Event("table-row-selection-change");
				event.value = $(this).attr('data-rowId');
				$("#${id}").trigger(event);
			} );
		<#else>
			$('#${id} .uic-row').bind('click', function(event){
				if( !event.metaKey ){
					$('#${id} .uic-row-selected').removeClass('uic-row-selected');
				}
				$(this).toggleClass('uic-row-selected');
				var event = jQuery.Event("table-row-selection-change");
				event.value = $("#${id} .uic-row-selected").map( function( idx, elem ){ return $(elem).attr("data-rowId"); } ).get().join(",");
				$("#${id}").trigger(event);
			} );
		</#if>

		<#-- Column SORT -->
		<#if sortable>
			$('#${id} .uic-tbl-header .uic-header-handle-sort').hover(
				function(event){
					$(window).css('cursor', 'pointer');
				},

				function(event){
					$(window).css('cursor', '');
				}
			);

			$('#${id} .uic-tbl-header .uic-header-handle-sort').bind( 'click', function( event ){
				event.stopImmediatePropagation();
				var sortDir = $(this).attr('data-sortDirection');
				if( sortDir == undefined ){
					sortDir = 'desc';
				}

				if( sortDir == 'desc' ){
					$(this).removeClass("ui-icon-triangle-1-n");
					$(this).removeClass("ui-icon-triangle-1-s");
					$(this).removeClass("ui-icon-triangle-2-n-s");
					$(this).addClass("ui-icon-triangle-1-s");
					$(this).attr('data-sortDirection', 'asc');

					var event = jQuery.Event("table-column-sort-asc");
					event.value = $(this).attr('data-colId');
					$("#${id}").trigger(event);
					return;
				}

				if( sortDir == 'asc' ){
					$(this).removeClass("ui-icon-triangle-1-n");
					$(this).removeClass("ui-icon-triangle-1-s");
					$(this).removeClass("ui-icon-triangle-2-n-s");
					$(this).addClass("ui-icon-triangle-1-n");
					$(this).attr('data-sortDirection', 'desc');

					var event = jQuery.Event("table-column-sort-desc");
					event.value = $(this).attr('data-colId');
					$("#${id}").trigger(event);
					return;
				}
			});
		</#if>

		<#-- Column RESIZE -->
		$('#${id} .uic-tbl-header .uic-cell-resizable').resizable({
			animate:        false,
			autoHide:       false,
			ghost:          false,
			handles:        'e',
			start: function( event, ui ){
				$(this).addClass('uic-resizing');
				var colId = $(this).attr('data-colId');
				$( '#${id} .uic-cell-data[data-colId="'+colId+'"]' ).css('width', '' );
				$( '#${id} .uic-cell-data[data-colId="'+colId+'"]' ).parent().css('width', '' );
			},
			stop: function( event, ui  ){
				var offset = 0;
				offset += $(this).children('.uic-header-handle').outerWidth();
                offset += $(this).children('.uic-header-handle-sort').outerWidth();
                offset += $(this).children('.uic-resizable-handle').outerWidth();

				$(this).removeClass('uic-resizing');
				$(this).css('height', '');
				var colId = $(this).attr('data-colId');
				var newSize = $(this).width() - offset - 10;
				var newSizePx = newSize+"px";
				$( '#${id} .uic-cell-data[data-colId="'+colId+'"]' ).css('width', newSizePx );
				$( '#${id} .uic-cell-data[data-colId="'+colId+'"]' ).parent().css('width', newSizePx );

				var event = jQuery.Event("table-column-resize");
				event.value = colId;
				event.newSize = newSize;
				$("#${id}").trigger(event);
			}
		});


		<#if dragndrop>
			<#-- Column DRAG -->
			$('#${id} .uic-tbl-header .uic-cell-data').draggable({
				axis:'x',
				snap:true,
				snapMode:'inner',
				revert:true,
				revertDuration:0,
				opacity: 0.50,
				stack: '#${id} .uic-tbl-header .uic-cell-data'
			});

			<#-- Column DROP -->
			$('#${id} .uic-tbl-header .uic-cell').droppable({
				accept: '#${id} .uic-tbl-header .uic-cell .uic-cell-data',
				tolerance:'pointer',
				activeClass: 'uic-cell-column-target',
				drop: function(event, ui) {
					var sourceColNo = parseInt($(ui.draggable).parent().attr('data-colNo'));
					var targetColNo = parseInt($(this).attr('data-colNo'));

					<#-- Same column? Nothing to do -->
					if(sourceColNo == targetColNo){
						$( ui.draggable ).css('position', 'static');
						$( ui.draggable ).css('left', 0 );
						$( ui.draggable ).css('top', 0 );
						return;
					}

					if( sourceColNo < targetColNo ){
						$('#${id} .uic-cell[data-colNo='+sourceColNo+']').each( function(){
							var target = $(this).parent('.uic-row, .uic-tbl-header').children('.uic-cell[data-colNo='+targetColNo+']');
							target.after( $(this) );
						});
					}else{
						$('#${id} .uic-cell[data-colNo='+targetColNo+']').each( function(){
							var target = $(this).parent('.uic-row, .uic-tbl-header').children('.uic-cell[data-colNo='+sourceColNo+']');
							$(this).before( target );
						});
					}

					$('#${id} .uic-tbl-header, #${id} .uic-row').each(function(){
						var idx = 0;
						$(this).children('.uic-cell').each(function(){
							$(this).attr('data-colNo', idx);
							idx++;
						});
					});

					var event = jQuery.Event("table-column-move");
					event.value = $('#${id} .uic-tbl-header .uic-cell .uic-cell-data').map(function(){return $(this).attr('data-colId');}).get().join(',');
					$("#${id}").trigger(event);
				}
			});
		</#if>
	</script>
</table>
</#escape>
</#macro>